<template>
  <el-header class="content-header">
    <template v-if="!messageView">
      <div class="seach head-item"></div>
      <div class="head-item head-right">
        <div class="head-item head-handle-btn" style="display: flex">
          <div class="arrc">
            <button class="cl-button cl-button--primary" @click="productEdit">
              +新增属性
            </button>
          </div>
        </div>
      </div>
    </template>
    <template>
      <el-main v-if="messageView">
        <Panel
          ref="articleContent"
          v-if="messageView"
          :productDetail="productDetail"
          @closeAddTemplate="closeAddTemplate"
          @postCreate="postCreate"
          :add="add"
        ></Panel>
      </el-main>
    </template>
  </el-header>
</template>

<script>
import * as productAttributeApi from "@/api/request/productAttributeApi";
import Panel from "./panel";
export default {
  props: ["picSearchOptions"],
  components: {
    Panel,
  },
  data() {
    return {
      messageView: false,
      add: "",
      productDetail: {
        attributeId: "",
        attributeType: "",
        attributeName: "",
        attributeDesc: "",
      },
    };
  },
  methods: {
    async postCreate() {
      await productAttributeApi.postCreate(this.productDetail).catch((i) => {
        if (i.status === 201) {
          this.$notify({
            customClass: "notify-success", //  notify-success ||  notify-error
            message: `新建成功!`,
            showClose: false,
            duration: 1000,
          });
        } else {
          this.$notify({
            customClass: "notify-error", //  notify-success ||  notify-error
            message: `新建失败!`,
            showClose: false,
            duration: 1000,
          });
        }
      });

      this.getList();
    },
    /**
     * 关闭新增
     */
    closeAddTemplate() {
      this.messageView = false;
    },
    productEdit(row) {
      this.add = 1;
      this.messageView = true;
    },
    //刷新页面
    getList() {
      this.$emit("getList");
    },
    // 置空搜索
    empty() {
      this.picSearchOptions.ChannelName = "";
      this.picSearchOptions.ChannelCode = "";
      this.getList();
    },

    searchEnterFun() {
      this.getList();
    },
    //
    batchDelete() {
      this.$emit("batchDelete");
    },
  },
};
</script>


<style  lang="scss" scoped>
@import "@/styles/content-manage/manage-head.scss";
.arrc {
  cursor: pointer;
  text-align: center;
  width: 90px;
  font-size: 12px;
  border-radius: 2px;
  margin-right: 20px;
}
.seach {
  margin-left: -4px;
}
.upload-wrap {
  &:hover {
    opacity: 0.8;
  }
}
.head-middle {
  margin-left: 0;
  padding-right: 0;
  margin-right: auto;
}
.handle-batch button {
  padding: 9px 16px;
  margin: 0;
  min-width: 60px;
}
.icon_hover {
  color: rgb(215, 216, 217);
}
.icon_hover:hover {
  color: #999;
}
</style>
